import React from 'react';
import PageTitle from 'component/page-title/PageTitle.jsx';

import MUtil from 'util/MUtil.jsx';
const mUtil = new MUtil();
import OrderService from 'service/OrderService.jsx';
const orderService = new OrderService();
import FileUploadUtil from 'util/FileUploadUtil.jsx';
import TableList from 'util/TableList.jsx';

import './order-detail.styl';
class OrderDetail extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      orderNumber: this.props.match.params.orderNumber,
      orderInfo: {},
    };
  }
  // {
  //   uri: "73a448d5-8bfb-42f0-abbb-6485e491c9fb.jpg",
  //   url: "http://img.happymmall.com/73a448d5-8bfb-42f0-abbb-6485e491c9fb.jpg"
  // }

  componentDidMount() {
    this.loadOrderDetail();
  }

  loadOrderDetail(){
    orderService.getOrderDetail(this.state.orderNumber)
      .then(res => {
        this.setState({ orderInfo: res.data });
      }, errMsg => mUtil.errorTips(errMsg));
  }
  /**
   * 发货操作
   */
  onSendGoods() {
    if (confirm('是否该订单已经发货?')) {
      orderService.sendCoods(this.state.orderNumber)
      .then(res=>{
        mUtil.successTips('发货成功');
        this.loadOrderDetail();
      }
      ,err=>mUtil.errorTips(err.errMsg));
    }
  }

  render() {
    let receiverInfo = this.state.orderInfo.shippingVo || {},
      productList = this.state.orderInfo.orderItemVoList || [];
    return (
      <div id="page-wrapper">
        <PageTitle title='订单详情' />
        <div className="form-horizontal">
          <div className="form-group">
            <label className="col-md-2 control-label">订单号</label>
            <div className="col-md-5">
              <p className="form-control-static">{this.state.orderInfo.orderNumber}</p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">创建时间</label>
            <div className="col-md-5">
              <p className="form-control-static">{this.state.orderInfo.createTime}</p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">收件人</label>
            <div className="col-md-5">
              <p className="form-control-static">
                {receiverInfo.receiverName}，
                {receiverInfo.receiverProvince}&nbsp;
                {receiverInfo.receiverCity} &nbsp;
                {receiverInfo.receiverAddress} &nbsp;
                {receiverInfo.receiverMobile || receiverInfo.receiverPhone}
              </p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">订单状态</label>
            <div className="col-md-5">
              <p className="form-control-static">
                {this.state.orderInfo.statusDesc}
                {
                  this.state.orderInfo.status === 20
                    ? <button className="btn btn-sm btn-default btn-send-good"
                      onClick={() => this.onSendGoods()}>立即发货</button>
                    : null
                }
              </p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">支付方式</label>
            <div className="col-md-5">
              <p className="form-control-static">
                {this.state.orderInfo.paymentTypeDesc}
              </p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">订单金额</label>
            <div className="col-md-5">
              <p className="form-control-static">
                ￥{this.state.orderInfo.payment}
              </p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品列表</label>
            <div className="col-md-10">
              {/* '商品图片', '商品信息', '单价', '数量', '合计' */}
              <TableList tableHeads={[
                { name: '商品图片', width: '20%' },
                { name: '商品信息', width: '30%' },
                { name: '单价', width: '15%' },
                { name: '数量', width: '15%' },
                { name: '合计', width: '20%' },
              ]}>
                {
                  productList.map((product, index) => {
                    return (
                      <tr key={index}>
                        <td>
                          <img src={`${this.state.orderInfo.imageHost}${product.productImage}`}
                            className='p-img'
                            alt={product.productName} />
                        </td>
                        <td>{product.productName}</td>
                        <td>￥{product.currentUnitPrice}</td>
                        <td>{product.quantity}</td>
                        <td>￥{product.totalPrice}</td>
                      </tr>
                    );
                  })
                }
              </TableList>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default OrderDetail;